<template>
  <div style="background-color:#f5f5f5">
    <div class="box">
      <div class="shcon">
        <input type="search" name="" id="" placeholder="找明星、演出、场馆" @keyup.enter="searchTitle" v-model="value">
        <router-link to="/ppw" @click="cancle()">
          <span>取消</span>
        </router-link>
      </div>
    </div>
    <div class="lists-con" v-if="arr[0]=='暂无相关数据'">
      暂无相关数据
    </div>
    <div v-else class="lists-con" v-for="v in arr" :key="v.id">
      <img :src='v.selectconDecimg' />
      <div class="con-right">
        <div class="title">{{v.selectconDecTitle}}</div>
        <p>{{v.selectconDecTime}}
          <span>{{v.selectconWeek}}</span>
        </p>
        <p>{{v.selectconDecAddress}}</p>
        <div class="ticketing">
          <span>{{v.selectconTicketing}}</span>
          <span>{{v.selectconPrice}}</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import getLinkData from '@/api/getLinkData.js'
export default {
  data() {
    return {
      arr: [],
      bool: false,
      value: '',
      num: '0'
      // selectconDecimg: "",
      // selectconDecTitle: "",
      // selectconDecTime: "",
      // selectconWeek: "",
      // selectconDecAddress: "",
      // selectconTicketing: "",
      // selectconPrice: ""
    }
  },
  methods: {
    cancle() {
      this.$route.go(-1)
    },
    searchTitle() {
      getLinkData('/apidl/searchDec', 'GET', {
        res: this.value
      }).then(res => {
        this.bool = !this.bool
        // this.selectconDecimg = res.data.selectconDecimg;
        // this.selectconDecTitle = res.data.selectconDecTitle;
        // this.selectconDecTime = res.data.selectconDecTime;
        // this.selectconWeek = res.data.selectconWeek;
        // this.selectconDecAddress = res.data.selectconDecAddress;
        // this.selectconTicketing = res.data.selectconTicketing;
        // this.selectconPrice = res.data.selectconPrice;
        this.arr = res.data
        if (this.arr.length == 0) {
          this.arr.push('暂无相关数据')
        }
        this.num++
      })
    }
  }
}
</script>
<style scoped>
.shcon {
  width: 90%;
  margin: auto;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
}
input {
  width: 90%;
  height: 0.7rem;
  border-radius: 0.4rem;
  text-indent: 20px;
}
span {
  color: red;
  font-size: 0.25rem;
}
.searchAfterCon {
  width: 100%;
  height: 1rem;
  background: #000;
}

.lists-con {
  width: 90%;
  margin: 0.2rem auto;
  background-color: #ffffff;
  display: flex;
}
.lists-con img {
  width: 2.4rem;
  border-radius: 0.3rem;
  /* background-color: aquamarine; */
}
.lists-con .con-right {
  width: 6.1rem;
  height: 3.1rem;
  position: relative;
  margin-left: 0.1rem;
}
.con-right .title {
  font-size: 0.32rem;
  font-weight: bold;
}
.con-right p {
  font-size: 0.24rem;
  margin-top: 0.2rem;
  color: rgb(136, 136, 136);
}

.con-right .ticketing {
  position: absolute;
  bottom: 0;
}
.ticketing span {
  display: block;
  position: absolute;
  font-size: 0.24rem;
}
.ticketing span:nth-child(1) {
  width: 1.2rem;
  height: 0.33rem;
  text-align: center;
  line-height: 0.33rem;
  color: red;
  border-radius: 0.1rem;
  background-color: antiquewhite;
  bottom: 0.1rem;
}
.ticketing span:nth-child(2) {
  width: 1.4rem;
  height: 0.33rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.33rem;
  /* background-color: antiquewhite; */
  bottom: 0.1rem;
  left: 1.2rem;
}
</style>